.filters {
  @apply max-w-md border-r;

  &--header {
    @apply flex items-center relative px-16 py-12 sm:px-32 sm:py-24 text-14 leading-150 font-semibold uppercase;

    &::after {
      @apply absolute inset-x-0 bottom-0 border-t;
      content: '';
    }
  }

  &--title {
    @apply flex items-center h-48 mr-auto;
  }

  &--count {
    @apply opacity-30 ml-8;
  }

  &--actions {
    @apply flex items-center;
  }

  &--content {
    @apply flex-1 flex flex-col overflow-y-scroll p-16 sm:px-32 sm:py-8;
  }

  &--footer {
    @apply relative px-16 pb-16 sm:px-32 sm:pb-32;
  }

  &--footer-actions {
    @apply border-t pt-16 sm:pt-32;
  }
}

.filters-close {
  @apply clean-btn bg-transparent -mr-8 mx-8 p-8 text-14 leading-150 font-semibold uppercase;
}

.filter-group {
  &:first-child {
    @apply border-t-0;
  }

  &--count {
    @apply inline-block align-middle opacity-30 ml-8 text-12;
  }

  &--options {
    @apply flex flex-wrap gap-y-16 justify-items-start mt-8;

    &.is-grid {
      @apply grid grid-cols-3 gap-16;
    }
  }
}

.filter-option {
  @apply w-full;

  .is-grid & {
    @apply border p-8 text-center transition-colors duration-200;

    &.is-active {
      @apply bg-pageBG text-pageText border-pageBG;
    }

    .control {
      &--label {
        @apply block text-center;
      }
    }
  }

  &.is-swatch {
    @apply inline-flex flex-col w-auto ml-4 mr-20 text-center;

    .swatch {
      @apply w-40 h-40;
    }

    .control {
      &--label {
        @apply flex flex-col items-center;

        svg {
          @apply absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-transparent border-none;

          path {
            color: var(--swatchBorder);
          }
        }
      }
    }

    input:checked + {
      .control--label {
        svg {
          @apply bg-transparent;
        }
      }
    }
  }

  &--icon {
    @apply relative;

    .is-grid & {
      @apply hidden;
    }
  }

  &--label {
    @apply mt-4 text-12 font-semibold;

    .is-swatch & {
      @apply mt-8;
    }
  }
}
